<template>
  <div class="user-manage">

    <div style="width: 100%;">
      <Button type="primary" class="m-r-5px" @click="openUserForm('add')"><Icon type="md-add"/> 新建用户</Button>
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadUsers">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>
      <div class="float-right">
        <Input class="m-r-5px" v-model="searchFormData.username" style="width: 150px;" placeholder="用户名" @on-enter="loadUsers"/>
        <Button class="m-r-5px" @click="loadUsers">
          <Icon type="md-search"/>
          搜索
        </Button>
        <Button @click="clearSearchForm">清空</Button>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="m-b-10px"></div>

    <Table ref="table" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadUsers">
    </Page>

    <UserForm ref="userForm" @refreshDataList="loadUsers"></UserForm>

  </div>
</template>

<script>

import ManageMixin from '../../../../mixin/ManageMixin'
import UserForm from "./UserForm";

export default {
  name: 'UserManage',
  mixins: [ManageMixin],
  components: {
    UserForm
  },
  data() {
    return {
      loading: false,
      searchFormData: {
        username: ''
      },
      columns: [
        {
          title: '用户名',
          key: 'username',
          width: 150
        },
        {
          title: '角色',
          key: 'role_name',
          width: 100
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: 'QQ',
          key: 'qq'
        },
        {
          title: '职业',
          key: 'profession'
        },
        {
          title: '创建时间',
          key: 'create_date',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-create'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.openUserForm('edit', params.row.id)
                  }
                }
              }),
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-undo'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.resetPassword(params.row.id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.deleteUser(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ]
    }
  },
  mounted() {
    this.loadUsers();
  },
  methods: {

    loadUsers() {
      this.loading = true
      this.$PnApi.UserApi.getUserByPage(this.pageIndex, this.pageSize, this.searchFormData.username).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },

    clearSearchForm() {
      this.searchFormData.username = ''
      this.loadUsers();
    },

    openUserForm(type, id) {
      this.$refs.userForm.init(type, id)
    },

    resetPassword(userId) {
      this.$Modal.confirm({
        title: '提醒',
        content: '是否将密码重置为【123】？',
        onOk: () => {
          this.$PnApi.UserApi.resetPassword(userId).then(result => {
            if (result.data.success) {
              this.loadUsers();
              this.$Message.success(result.data.message)
            }
          })
        }
      });
    },

    deleteUser(id) {
      this.$PnApi.UserApi.deleteUser(id).then(result => {
        if (result.data.success) {
          this.loadUsers();
          this.$Message.success(result.data.message)
        }
      })
    }

  },
  computed: {}
}
</script>

<style scoped>

.ivu-form-item {
  margin-bottom: 0px !important;
}
</style>
